<template>
	<el-dialog title="实时数据" v-model="visible" :close-on-click-modal="false" draggable width="70%" :destroy-on-close="true">
		<el-card header="设备信息">
			<el-row :gutter="20">
				<el-col :span="12">
					<div>
						<div class="flex mb-2">
							<span class="text-info min-w-[6em]">设备名称：</span>
							<span>{{ data?.name }}</span>
						</div>
						<div class="flex mb-2">
							<span class="text-info min-w-[6em]">设备编码：</span>
							<span>{{ data?.equipmentCode }}</span>
						</div>
						<div class="flex mb-2">
							<span class="text-info min-w-[6em]">所属区域：</span>
							<span>{{ data?.airSiteName }}</span>
						</div>
						<div class="flex mb-2">
							<span class="text-info min-w-[6em]">设备状态：</span>
							<el-tag :type="data?.status === 2 ? 'success' : 'danger'">{{ data?.status === 2 ? '在线' : '离线' }}</el-tag>
						</div>
						<div class="flex mb-2">
							<span class="text-info min-w-[6em]">安装地点：</span>
							<span>{{ data?.address }}</span>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<PosMap class="w-full h-[280px]" ref="mapRef" :latitude="data?.latitude" :longitude="data?.longitude" />
				</el-col>
			</el-row>
		</el-card>
		<el-card header="实时数据" class="mt-4">
			<el-row :gutter="24">
				<el-col :span="12" class="mb-4" v-for="item in data?.detail" :key="item.id">
					<el-descriptions :column="5" size="small" direction="vertical" border>
						<el-descriptions-item label="检测因子" min-width="80">{{ item?.cnName }}</el-descriptions-item>
						<el-descriptions-item label="采集时间" min-width="80">{{ data?.recordTime }}</el-descriptions-item>
						<el-descriptions-item label="当前值" min-width="80">{{ item?.val }}{{ item?.unit }}</el-descriptions-item>
						<el-descriptions-item label="数据标记" min-width="80">{{ getFlagMsg(item.flag) }}</el-descriptions-item>
						<el-descriptions-item label="" width="80">
							<el-button size="small" type="primary" icon="more" @click="handleMore(item)">更多</el-button>
						</el-descriptions-item>
					</el-descriptions>
				</el-col>
			</el-row>
		</el-card>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { fetchByEquipmentId } from '/@/api/platform/airRealTimeData';
import router from '/@/router';
import PosMap from './components/map.vue';
import { flagMsg } from './data';
// 定义变量内容
const visible = ref(false);
const mapRef = ref();
// 提交表单数据
const data: any = reactive({
	id: '',
});

// 打开弹窗
const openDialog = (row: any) => {
	visible.value = true;
	data.latitude = null;
	data.longitude = null;

	// 获取airAlarmSetting信息
	Object.assign(data, row);
	if (row.id) {
		getDeviceDetail(row.id);
	}
};
// 获取设备实时数据
const getDeviceDetail = async (id: string) => {
	const res = await fetchByEquipmentId({ monitorEquipmentId: id });
	Object.assign(data, res.data);
	if (data?.latitude && data?.longitude) {
		await unref(mapRef)?.initMap();
	}
};
const handleMore = (item: any) => {
	const q = {
		siteId: data.airSiteId,
		monitorEquipmentId: data.equipmentId,
		factorId: item.id,
		dateTime: data.recordTime,
	};
	router.push({
		path: '/platform/dataMgmtHistory/index',
		query: q,
	});
};
// 获取数据标记信息
const getFlagMsg = (code: string) => {
	const item = flagMsg.find((d) => d.code === code);
	return item?.msg;
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
